<template>
  <div v-loading="loading">
    <base-window :title="$t('common.task.button.approve')" size="large" :show.sync="visible" width="700px" class="order-approve-dialog">
        <div class="base-modal-content">
        <div class="form-view-row">
            <label>{{$t('task.detail.components.source')}}</label>
            <div class="form-view-row-content">{{ getSource(approve.source) }}</div>
        </div>
        <div class="form-view-row">
            <label>{{$t('common.base.serialNumber')}}</label>
            <div class="form-view-row-content">{{ approve.orderNo }}</div>
        </div>
        <div class="form-view-row">
            <label>{{$t('common.base.type')}}</label>
            <div class="form-view-row-content">{{ $t('order.component.approveRefund')}}</div>
        </div>
        <div class="form-view-row">
            <label>{{ $t('order.component.refundAmount')}}</label>
            <div class="form-view-row-content">¥ {{ approve.refundMoney }}</div>
        </div>
        <div class="form-view-row">
            <label>{{$t('common.base.node')}}</label>
            <div class="form-view-row-content">{{ getOrderState(approve.orderState) }}</div>
        </div>
        <div class="form-view-row">
            <label>{{$t('common.base.promoter')}}</label>
            <div class="form-view-row-content">{{ approve.createUserName }}</div>
        </div>

        <div class="form-view-row">
            <label>{{$t('task.promoteTime')}}</label>
            <div class="form-view-row-content">{{ (approve.createTime) | formatTime }}</div>
        </div>
        <div class="form-view-row">
            <label>{{$t('task.promoteRemark')}}</label>
            <div class="form-view-row-content">{{ approve.refundCause }}</div>
        </div>
        <div class="form-view-row">
            <label>{{$t('common.base.attachment')}}</label>
            <div class="form-view-row-content">
              <base-file-item v-for="file in approve.attachment" :Source="approve.attachment" :key="file.id" :file="file" @delete="deleteFile" size="small" readonly></base-file-item>
            </div>
        </div>
        <div class="dividing-line"></div>

        <template>
            <div class="form-view-row form-view-row-approval-results">
            <label><span style="color:red">*</span>{{$t('task.detail.components.approveResult')}}</label>
            <div class="form-view-row-content">
                <textarea class="text-desc" v-model="approveRemark" placeholder="请输入审批结果[最多500字]" rows="3" maxlength="500" />
                <p class="tips">{{$t('task.tip.approveTip2')}}</p>
            </div>
            </div>
        </template>

        </div>
        <div slot="footer" class="dialog-footer">
            <div class="dialog-footer-left"></div>
            <div class="dialog-footer-right">
                <template>
                    <el-button type="danger" plain @click="submit(false)" :disabled="pending">{{$t('common.base.refuse')}}</el-button>
                    <el-button type="primary" @click="submit(true)" :disabled="pending">{{$t('common.base.agree')}}</el-button>
                </template>
            </div>
        </div>
    </base-window>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform'
import { getRootWindow } from '@src/util/dom'
import dayjs from 'dayjs';
import { getOssUrl } from '@src/util/assets'
import i18n from '@src/locales';
import { getRefundInfo, refundApprove } from '@src/api/PortalApi.ts';
const rootWindow = getRootWindow(window)
const sourceArr = [i18n.t('common.base.mall')]
// orderState 就是订单的状态，订单状态 1:待支付 2:代发货 3:已发货 4:已完成 5:已取消
const orderState = [i18n.t('bill.list.tradeResultMap[0]'), i18n.t('common.form.preview.stock.status.goodsShipped'), i18n.t('common.base.usualStatus.delivered'), i18n.t('common.base.usualStatus.delivered'), i18n.t('common.base.usualStatus.canceled')]

export default {
    name: 'order-approve-dialog',
    props: {
        
    },
    data: () => {
      return {
        isOpenData,
        visible: false,
        pending: false,
        approveRemark: '',
        approve: {},
        refundId: '',
        loading: false
      };
    },
    computed: {
        
    },
    filters: {
      formatTime(time) {
        if (!time) return;
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    mounted () {
        this.$nextTick(()=> {
        if(rootWindow.WWOpenData) {
            rootWindow.WWOpenData.bindAll(document.querySelectorAll('ww-open-data'));
        }
        })
    },
    methods: {   
        reset() {
            this.approveRemark = '';
            this.approve = {};
        },
        getSource(source) {
          return sourceArr[source]
        },
        getOrderState(state) {
          return orderState[state-1]
        },
        async openDialog(refundId) {
            if (this.pending) return;
            this.loading = true;
          // 重置
            this.reset();
            // 接口调用，获取弹窗数据
            this.refundId = refundId
            let params = {
              refundId
            }
            const { code, data, msg } = await getRefundInfo(params);
            this.loading = false
            if(code !== '200') return
            this.approve = data
            
        },

        async submit(result) {    
            this.pending = true;
            // 接口调用，调用完成后关闭弹窗
            let approveObj = {
              approveResult: result,
              refundIdList: [this.refundId],
              approveRemark: this.approveRemark
            }
            const { code, data, msg } = await refundApprove(approveObj);
            if (code !== '200') return this.$message.error(msg);
            this.visible = false
            this.$emit('reloadPage')
        },
    }
}
</script>

<style lang="scss" scoped>
.order-approve-dialog {

  .approve-attach {
    margin-top: 4px;
  }


  .form-view-row {
    padding: 6px 0px;
    label{
      min-width: 84px;
      text-align: left;
    }

    .result-content {
      height: 24px;
      overflow-y: hidden;
    }
  }

  .dialog-footer {
    text-align: left;
    display: flex;
    flex: 1;

    .dialog-footer-left {
      flex: 1;
      font-size: 12px;
    }

    .dialog-footer-right {
      text-align: right;
    }
  }
}
.dividing-line{
  margin: 8px 0;
  width: calc(100% + 38px);
  border-top: 1px #ddd dashed;
  transform: translateX(-20px);
}

.tips {
  margin-bottom: 0!important;
  margin-top: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.go-approve-detail {
  color: $color-primary-light-6;
  text-decoration: underline;
}

// element-ui
::v-deep .el-step__main{
  margin-bottom: 20px;
}
::v-deep .el-step__description{
  color: #000000;
  padding: 0
}
.form-view-row {
  padding-top: 6px;
  padding-bottom: 6px;
}
.form-view-row-approval-results {
  align-items:flex-start;
  .text-desc {
    width: 100%;
  }
}
</style>
